<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>正倒序循环播放</title>
    <style>
        .container {
            max-width: 800px;
            margin: 20px auto;
            text-align: center;
        }
        
        video {
            width: 100%;
            height: auto;
            border: 1px solid #ccc;
            background: #000;
        }
        
        .controls {
            margin-top: 20px;
        }
        
        input[type="file"] {
            margin: 10px 0;
        }
        
        .loading {
            color: #666;
            padding: 10px;
        }
    </style>
</head>
<body>
    <div class="container">
        <input type="file" id="fileInput" accept="video/*">
        <div id="videoContainer">
            <video id="forwardVideo" muted playsinline></video>
            <video id="reversedVideo" muted playsinline style="display:none;"></video>
        </div>
        <div class="loading" id="loading">视频处理中...</div>
        <div class="controls">
            <button onclick="togglePlay()">播放/暂停</button>
        </div>
    </div>

    <script src="https://unpkg.com/@ffmpeg/ffmpeg@0.12.15/dist/umd/ffmpeg.js"></script>
    <script>
        const { createFFmpeg, fetchFile } = FFmpeg;
        const ffmpeg = createFFmpeg({
            corePath: "https://unpkg.com/@ffmpeg/core@0.12.10/dist/umd/ffmpeg-core.js",
            log: false
        });

        let isPlaying = false;
        const maxVideoDuration = 15; // 最大支持15秒视频
        const loading = document.getElementById('loading');
        const forwardVideo = document.getElementById('forwardVideo');
        const reversedVideo = document.getElementById('reversedVideo');

        // 初始化隐藏加载提示
        loading.style.display = 'none';

        // 文件选择处理
        document.getElementById('fileInput').addEventListener('change', async (e) => {
            const file = e.target.files[0];
            if (!file) return;

            // 验证视频时长
            const duration = await getVideoDuration(file);
            if (duration > maxVideoDuration) {
                alert(`视频时长不能超过${maxVideoDuration}秒`);
                return;
            }

            startProcessing(file);
        });

        // 获取视频时长
        async function getVideoDuration(file) {
            return new Promise((resolve) => {
                const url = URL.createObjectURL(file);
                const tempVideo = document.createElement('video');
                tempVideo.src = url;
                tempVideo.onloadedmetadata = () => {
                    resolve(tempVideo.duration);
                    URL.revokeObjectURL(url);
                };
            });
        }

        // 主处理函数
        async function startProcessing(file) {
            try {
                showLoading();
                
                // 初始化FFmpeg
                if (!ffmpeg.isLoaded()) {
                    await ffmpeg.load();
                }

                // 处理原始视频
                const fileName = 'input.mp4';
                ffmpeg.FS('writeFile', fileName, await fetchFile(file));
                
                // 生成倒序视频
                await ffmpeg.run('-i', fileName, '-vf', 'reverse', 'reversed.mp4');

                // 创建视频对象URL
                const reversedData = ffmpeg.FS('readFile', 'reversed.mp4');
                const reversedUrl = URL.createObjectURL(
                    new Blob([reversedData.buffer], { type: 'video/mp4' })
                );

                // 设置视频源
                forwardVideo.src = URL.createObjectURL(file);
                reversedVideo.src = reversedUrl;

                // 预加载视频
                await Promise.all([
                    new Promise(resolve => forwardVideo.onloadeddata = resolve),
                    new Promise(resolve => reversedVideo.onloadeddata = resolve)
                ]);

                // 设置初始播放器
                forwardVideo.style.display = 'block';
                reversedVideo.style.display = 'none';
                
                // 设置事件监听
                setupPlaybackEvents();
                
                // 自动开始播放
                forwardVideo.play();
                isPlaying = true;

            } catch (error) {
                console.error('处理失败:', error);
                alert('视频处理失败，请重试');
            } finally {
                hideLoading();
            }
        }

        // 设置播放事件
        function setupPlaybackEvents() {
            forwardVideo.onended = () => {
                forwardVideo.style.display = 'none';
                reversedVideo.style.display = 'block';
                reversedVideo.play();
            };

            reversedVideo.onended = () => {
                reversedVideo.style.display = 'none';
                forwardVideo.style.display = 'block';
                forwardVideo.play();
            };
        }

        // 播放/暂停控制
        function togglePlay() {
            if (isPlaying) {
                forwardVideo.pause();
                reversedVideo.pause();
            } else {
                const activeVideo = forwardVideo.style.display === 'block' 
                    ? forwardVideo 
                    : reversedVideo;
                activeVideo.play();
            }
            isPlaying = !isPlaying;
        }

        // 显示加载状态
        function showLoading() {
            loading.style.display = 'block';
            forwardVideo.style.display = 'none';
            reversedVideo.style.display = 'none';
        }

        // 隐藏加载状态
        function hideLoading() {
            loading.style.display = 'none';
        }
    </script>
</body>
</html>